<template>
    <div class="modal" :style="{display: showSelf ? 'block' : 'none'}">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{title}}</h5>
                    <button type="button" class="close" @click="close">
                        <span>&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <!-- 插槽 -->
                    <slot></slot>
                </div>

                <div class="modal-footer">
                    <slot name="footer"></slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // _show: this.show 不要用下划线起名，vue不允许，因为可能会和Vue内置属性，API方法冲突
                showSelf: this.show
            }
        },
        methods: {
            close() {
                // ↓ 不要直接修改父组件传过来的值，而应该定义一个私有 _show ↓
                // this.show = false;
                this.showSelf = false;
                // 通知父组件更新 modalName = ""
                this.$emit('close');
            }
        },
        watch: {
            show(newValue) {
                // 第一次有用，后续无用。
                // 因为第一次父组件点击注册后，传递过来show为true
                // 触发了watch更新
                // 但点击模态框关闭按钮
                // 也就是触发上面 close 方法后
                // 再第二次点击父组件注册，show仍为true
                // 就不会触发watch了
                // 所以我们需要在 close 方法中通知父组件
                // 我更改值为false，你父组件也变一下吧
                this.showSelf = this.show;
            }
        },
        props: [
            "show",
            "title",
        ]
    }
</script>

<style lang="scss" scoped>

</style>